<!--
 * @Author: wanglianxin
 * @Date: 2022-06-23 17:39:59
 * @LastEditors: wanglianxin
 * @LastEditTime: 2023-08-21 11:43:02
 * @FilePath: \standard-check\src\components\CollectImages\handleImgFn.vue
 * @Description: 操作图像
-->
<script>
import CreateImage from '../../utils/fabricModule/fabricModule';
export default {
  data() {
    return {
      controlColor: '#0075FF',
      strokeColor: '#979797',
      isAllowSubmitManually: true,
      isAllowWheelLock: false,
    };
  },
  methods: {
    /**
     * @description: 画主图
     * @return {*}
     */
    mainFabric() {
      this.loading = true;
      this.$nextTick(() => {
        if (this.chooseCanvas) {
          try {
            //ie浏览器执行dispose会报错暂时用try防止暂停逻辑
            this.chooseCanvas.dispose();
          } catch (err) {
            console.log(err);
          }
        }
        if (!this.collectedImagesList.length) return;
        let stampImage = this.collectedImagesList[this.currentImageIndex].imageUrl;
        let canvas = new CreateImage(
          'mainCanvas',
          {
            static: false,
            adapt: true,
            hasControls: false,
            cornerSize: 20,
            cornerColor: 'transparent',
            cornerStyle: 'circle',
            controlColor: '#0075FF', //选中边框颜色
            strokeColor: '#979797', //框选线颜色
            preserveObjectStacking: true,
          },
          {
            image: stampImage,
          }
        );
        this.chooseCanvas = canvas;
        canvas.on('rotated', (err, data) => {
          if (err) {
            this.$modalMessage.warning(err.msg);
            return;
          }
        });
        canvas.on('loaded', () => {
          this.loading = false;
        });
      });
    },
    /**
     * @description: 切换手工框章模式
     * @return {*}
     */
    switchManuallyExtract() {
      if (!this.collectedImagesList.length) return;
      //开启框章
      let { sealShape, drawSelectArea, sealShapeCircleModel } = this.manuallyExtractOpt;
      this.chooseCanvas.startManuallyExtract(
        { sealShape: sealShape === 0 ? 'rect' : 'circle', drawSelectArea, sealShapeCircleModel },
        (err, data) => {
          if (err) {
            this.$modalMessage.warning(err.msg);
          }
        }
      );
    },
    /**
     * @description: 提交框章
     * @return {*}
     */
    submitManuallyExtract() {
      // this.manualSuccess();
      let _this = this;
      if (!this.isAllowSubmitManually) {
        return;
      }
      this.isAllowSubmitManually = false;
      this.chooseCanvas.submitManuallyExtract((err, data) => {
        if (err) {
          this.$modalMessage.warning(err.msg);
          this.isAllowSubmitManually = true;
          this.manuallyExtractOpt.isCompleteManually = false;
          return;
        }
        let { ip, port } = this.configParams.system.transferService;
        if (this.$config.imageSocketIp) {
          ip = this.$config.imageSocketIp;
        }
        const thisImage = this.collectedImagesList[this.currentImageIndex];
        const imageSocket = thisImage.imageSocket || `${ip};${port};${thisImage.file_id}-${thisImage.upload_batch_id}`;
        const reqData = {
          taskCode: 'MAN_BUILD',
          file_id: this.collectedImagesList[this.currentImageIndex].file_id,
          imageSocket,
          imageIndex: Number(this.currentImageIndex),
          dpi: 300,
          top: data.top,
          left: data.left,
          bottom: data.bottom,
          right: data.right,
          shape: +this.manuallyExtractOpt.sealShape,
          color: +this.manuallyExtractOpt.sealColor > 2 ? 2 : +this.manuallyExtractOpt.sealColor,
          sealType: +this.manuallyExtractOpt.sealType,
          showEpArea: 0,
        };
        this.$emit('change', {
          type: 'submitManually',
          reqData,
          selectArea: data,
          callBack(state) {
            if (state) {
              //成功
              _this.drawingObject = null;
            }
          },
        });
        this.isAllowSubmitManually = true;
      });
    },
  },
  watch: {
    manuallyExtractOpt: {
      deep: true,
      handler(value) {
        let { sealShape, drawSelectArea, sealShapeCircleModel } = value;
        if (value.isCompleteManually) {
          this.submitManuallyExtract();
        }
        this.chooseCanvas &&
          this.chooseCanvas.setManuallyExtract({
            sealShape: sealShape === 0 ? 'rect' : 'circle',
            drawSelectArea,
            sealShapeCircleModel,
          });
      },
    },
    'manuallyExtractOpt.isManuallyExtract'(value) {
      //是否为手动框章提取
      if (value) {
        //开始提取
        this.switchManuallyExtract(value);
      } else {
        //取消提取
        this.chooseCanvas && this.chooseCanvas.stopManuallyExtract();
      }
    },
    collapsed(value) {
      console.log('收缩了', value);
    },
  },
};
</script>
